<template>
  <div class="wrapper">
    <div class="header-wrapper">
      <n-input size="small" block placeholder="搜索图层">
        <template #prefix>
          <n-icon :component="SearchOutline" />
        </template>
      </n-input>
      <n-button
        class="search-button"
        type="primary"
        secondary
        stronger
        size="small"
        >搜索</n-button
      >
    </div>
    <n-divider />
    <n-menu
      :collapsed-width="64"
      :collapsed-icon-size="22"
      :options="layers"
      :render-label="renderMenuLabel"
      :render-icon="renderMenuIcon"
      :expand-icon="expandIcon"
      :value="mapStore.selectLayer"
      @updateValue="handleLayerSelect"
    />
    <!-- <div class="layer-list">
        <div class="layer-item" v-for="item in"></div>
      </div> -->
    <n-button
      style="margin: 8px; margin-top: auto"
      type="primary"
      secondary
      strong
      @click="handleNewLayer"
      >添加图层</n-button
    >
    <DialogForm
      ref="AddLayerRef"
      @submit="handleSubmit"
      :schema="addLayerJson"
    ></DialogForm>
  </div>
</template>

<script lang="ts" setup>
import { h, ref, Component, computed, onMounted, watch } from "vue";
import {
  MenuOption,
  NButton,
  NIcon,
  NImage,
  NPopselect,
  NSpace,
  useMessage,
} from "naive-ui";
import { useMapStore } from "@/store/map";
import DialogForm from "@/components/form-builder/dialog.vue";
import addLayerJson from "@/json/addLayer.json";
import { useEventBus } from "@vueuse/core";
import { v1 } from "uuid";
import { addLayer } from "@/api";
import {
  EyeOutline,
  EyeOffOutline,
  EllipseOutline,
  EllipsisVerticalOutline,
} from "@vicons/ionicons5";
const mapBus = useEventBus("map");
const message = useMessage();
const mapStore = useMapStore();
//@ts-ignore
import {
  SearchOutline,
  EllipsisHorizontal,
  BalloonOutline,
  CubeOutline,
  BrowsersOutline,
  PieChart,
} from "@vicons/ionicons5";
const menuOptions = [
  {
    label: "上移",
    value: 2,
  },
  {
    label: "下移",
    value: 3,
  },
  {
    label: "移动到顶部",
    value: 4,
  },
  {
    label: "移动到底部部",
    value: 5,
  },
];
const AddLayerRef = ref();
const layers = computed(() => {
  return mapStore.datasetInfo.layers.map((item) => {
    return {
      label: item.name,
      key: item.pid,
      img: item.img,
      visible: item.visible,
    };
  });
});

//@ts-ignore
import ContextMenu from "@imengyu/vue3-context-menu";
// const selectMenu = ref("basic");
const componentList = ref([
  {
    name: "输入框",
    img: "",
    value: "",
  },
  {
    name: "图片",
    img: "",
    value: "",
  },
  {
    name: "选择框",
    img: "",
    value: "",
  },
  {
    name: "按钮",
    img: "",
    value: "",
  },
]);
const handleLayerSelect = (pid: string) => {
  // const layer = mapStore.getCurrentLayer();
  console.log(pid);
  mapStore.configType = "layer";
  if (pid != mapStore.selectLayer) {
    mapStore.selectLayer = pid;
  }

  // console.log(layer);

  // console.log(layers);
};
function renderMenuLabel(option: any) {
  return h(
    NSpace,
    {
      align: "center",
      size: 0,
      wrapItem: false,
      inline: true,
      style: {
        "user-select": "none",
      },
    },
    {
      default: () => [
        h(
          "div",
          { style: { marginLeft: "6px", fontSize: "12px", width: "70px" } },
          { default: () => option.label }
        ),
        h(
          NButton,
          {
            onClick(e) {
              e.stopPropagation();
              const layer = mapStore.getOriginalLayerByPid(option.key);
              console.log(layer);
              layer.visible = !layer.visible;
              mapBus.emit({
                type: "relayout",
                value: { visibility: layer.visible ? "visible" : "none" },
                id: `${layer.pid}-${layer.type}`,
              });
            },
            quaternary: true,
            style: {
              width: "25px",
            },
          },
          {
            icon: () =>
              h(
                NIcon,
                {},
                {
                  default: () => {
                    return h(option.visible ? EyeOutline : EyeOffOutline);
                  },
                }
              ),
          }
        ),
        h(
          NPopselect,
          {
            options: menuOptions,
            trigger: "click",
          },
          {
            default: () =>
              h(
                NButton,
                {
                  onClick(e) {
                    e.stopPropagation();
                  },
                  quaternary: true,
                  style: {
                    width: "25px",
                  },
                },
                {
                  icon: () =>
                    h(
                      NIcon,
                      {},
                      {
                        default: () => {
                          return h(EllipsisVerticalOutline);
                        },
                      }
                    ),
                }
              ),
          }
        ),
      ],
    }
  );
}
function renderMenuIcon(option: any) {
  return h("img", {
    src: option.img,
    objectFit: "contain",
    style: { width: "33px", height: "33px" },
  });
}
const findParentByClass = (dom: HTMLElement, className = "") => {
  if (dom.classList.contains(className)) {
    return dom;
  } else {
    return findParentByClass(dom.parentNode as HTMLElement, className);
  }
};
const handleShowContextMenu = (e: any) => {
  e.preventDefault();
  const dom = findParentByClass(e.target, "n-menu-item-content");
  const layer = mapStore.datasetInfo.layers.find(
    (item) => item.name == dom.innerText
  );
  console.log(layer);
  ContextMenu.showContextMenu({
    x: e.x,
    y: e.y,
    theme: "flat dark",
    items: [
      {
        label: "编辑",
      },
      {
        label: "删除",
      },
    ],
  });
  // if (e.target.className != "n-menu-item-content-header") {
  //   // console.log(e.target.parentNode);
  // }
};
const handleNewLayer = () => {
  const form = {
    img: "https://rcs-bucket.oss-cn-hangzhou.aliyuncs.com/app%2Fspace%2F78373e955caf4eb8a3a82b36e7d971f6_img-1.png",
    pid: v1(),
    parent: mapStore.datasetInfo.pid,
    properties: {},
    style: {},
  };
  AddLayerRef.value?.open({
    data: form,
  });
};
const handleSubmit = ({ title, data }) => {
  if (title == "新建图层") {
    data.columns = [];
    addLayer(data)
      .then((res) => {
        console.log(res);
        message.success("新建图层成功");
        mapStore.getDatasetInfo(mapStore.datasetInfo.pid);
      })
      .catch((e) => {
        message.error(`新建图层失败:${e}`);
      });
  }
  console.log(title, data);
};
function expandIcon() {
  return h(NIcon, null, { default: () => h(PieChart) });
}
onMounted(() => {
  if (mapStore.selectLayer) {
    handleLayerSelect(mapStore.selectLayer);
  }
});
</script>

<style lang="scss" scoped>
.wrapper {
  height: calc(100vh - 100px);
  display: flex;
  // padding: 8px;
  box-sizing: border-box;
  flex-direction: column;
  text-align: left;
  .header-wrapper {
    padding: 8px;
    padding-bottom: 0;
    display: flex;
    .search-button {
      margin-left: 8px;
    }
  }
  .menu-list {
    padding: 8px;
    font-size: 14px;
    .menu-item {
      padding: 8px;
      cursor: pointer;
    }
    .active {
      background-color: rgba(99, 226, 183, 0.15);
    }
  }
}

:deep() {
  .n-divider {
    margin: 8px 0 !important;
  }
}
.component-list {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 6px;
  overflow: hidden;
}
// :deep() {
//   .n-menu .n-menu-item {
//     height: 80px !important;
//   }
// }
// :deep() {
//   .n-menu {
//     width: 64px !important;
//     padding: 0 !important;
//   }
//   .n-menu--collapsed {
//     .n-menu-item {
//       height: 48px !important;
//       width: 64px;
//     }
//     .n-menu-item-content-header {
//       display: none;
//     }
//     .n-menu-item-content {
//       display: flex !important;
//       flex-direction: column;
//       justify-content: center;
//       padding: 0 !important;
//       height: 48px !important;
//     }
//   }
//   .n-menu .n-menu-item {
//     height: 64px;
//     width: 64px;
//   }
//   .n-menu .n-menu-item-content {
//     display: flex !important;
//     flex-direction: column;
//     justify-content: center;
//     padding: 0 !important;
//     height: 64px;
//   }
//   .n-menu-item-content__icon {
//     margin-right: 0px !important;
//   }
// }
</style>
